<template>
  <div id="view">
    <el-container>
      <el-header>
        <div class="logo">
          <img src="@/assets/IMAGES/kj-logo.png" alt="" />
        </div>
        <h3>康久集团数据监控</h3>
        <!--标题-->
        <div class="screen-title">
          <p>{{ currentTime }}</p>
        </div>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="2">
            <div class="header">
              <h3>总体数据</h3>
            </div>
            <div class="data-list">
              <h6>覆盖城市:</h6>
              <div class="value">120+</div>
              <h6>所属机构:</h6>
              <div class="value">1500+</div>
              <h6>覆盖人群:</h6>
              <div class="value">3100万+</div>
              <h6>活跃会员:</h6>
              <div class="value cursor" @click="jumpDataList('活跃会员')">
                120万+
              </div>
              <h6>付费人次:</h6>
              <div class="value">50万+</div>
            </div>
            <div class="detail">
              <el-button type="info" icon="el-icon-pie-chart" class="select-btn" @click="jumpPage">数据详情
              </el-button>
            </div>
          </el-col>
          <el-col :span="18">
            <!--地图-->
            <div id="map-chart"></div>
          </el-col>
          <el-col :span="4">
            <!-- <div class="menu-box clearfix">
              <div class="menu-list" v-for="(ite, inde) in menu" :key="inde" @click="selectMenu(ite)">
                <div class="menu-logo">
                  <img :src="ite.src" alt="" />
                </div>
                <div class="title">
                  <h3>{{ ite.title }}</h3>
                </div>
              </div>
            </div>
            <div class="menu-box clearfix">
              <div class="menu-list" v-for="(ite, inde) in secondMenu" :key="inde" @click="selectMenu(ite)">
                <div class="menu-logo">
                  <img :src="ite.src" alt="" />
                </div>
                <div class="title">
                  <h3>{{ ite.title }}</h3>
                </div>
              </div>
            </div> -->

            <div class="menu-box" v-for="(ite, inde) in menu" :key="inde">
              <div class="menu-list" @click="selectMenu(ite)">
                <div class="menu-logo">
                  <img :src="ite.src" alt="" />
                </div>
                <div class="title">
                  <h3>{{ ite.title }}</h3>
                </div>
              </div>
            </div>

            <div class="menu-card">
              <div class="title">云养老</div>
              <div class="menu-item" v-for="(ite, inde) in secondMenu" :key="inde" @click="selectMenu(ite)">
                <div class="menu-logo">
                  <img :src="ite.src" alt="" />
                </div>
                <div class="menu-title">
                  <h3>{{ ite.title }}</h3>
                </div>
              </div>

            </div>

          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
//中国地图
import geoJson from "@/assets/REGION/china.json";
//省份机构
import pniJSON from "@/assets/JSON/provincial-number-institutions.json";

import * as echarts from "echarts/core";
import countTo from "vue-count-to";
import "echarts-liquidfill";
import {
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import {
  MapChart,
  BarChart,
  PieChart,
  EffectScatterChart,
} from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import base from "@/assets/JS/base";

echarts.use([
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  GridComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  PieChart,
  EffectScatterChart,
  GeoComponent,
]);
export default {
  name: "dataView",
  data() {
    return {
      menu: [
        {
          src: require("@/assets/IMAGES/icon_yyy.png"),
          title: "云医院",
          url: "https://hospital.yyanglao.com/pc/#/login",
        },
        {
          src: require("@/assets/IMAGES/icon_yyf.png"),
          title: "云药房",
          url: "yyf",
        },
      ],
      secondMenu: [
        {
          src: require("@/assets/IMAGES/icon_zf.png"),
          title: "常山孝眼",
          url: "http://changshan.y7100.monitor.yiy-tech.cn",
        },
        {
          src: require("@/assets/IMAGES/dp.png"),
          title: "衢江养老",
          url: "http://220.191.238.249:8090/csadmin/#/login",
        },
      ],
      imgSrc: require("@/assets/IMAGES/icon_map.png"),
      currentTime: this.$base.timeSwitch(new Date(), true),
      proviceData: [], //地图初始点亮
    };
  },
  methods: {
    //数据列表
    jumpDataList(title) {
      this.$router.push({ path: "/dataScreen/data-list", query: { title } });
    },
    handleCommand(e) {
      this.genderValue = e;
    },
    selectMenu(e) {
      let url = e.url;
      //云药房
      if (url == "yyf") {
        this.getToken();
      }
      //外链
      else if (url.includes("http")) {
        if (
          sessionStorage.getItem("loginInfo") &&
          JSON.parse(sessionStorage.getItem("loginInfo")).token
        ) {
          if (url == 'https://hospital.yyanglao.com/pc/#/login') {
            let token = JSON.parse(sessionStorage.getItem("loginInfo")).token;
            window.open(url + `?token=${token}`);
          } else {
            window.open(url);
          }
        } else {
          this.$message.warning('请先登录');
          this.$router.push('/login');
        }
      }
    },
    selectAll() {
      this.getMapData("china", chinaJson);
      this.isShowAll = false;
    },
    //跳转
    jumpPage() {
      this.$router.push("/dataScreen/data-view");
    },
    /***云药房获取token**/
    async getToken() {
      let res = await this.$base.axiosPost(
        "https://yydsdev.yiy-tech.cn/server/user/login",
        {
          username: "demo",
          encPassword:
            "$2a$04$eJyhA799Usp63.f4XjAmoOVWrQ9iIw4hqZih1FCz4bw8JeV82/a/i",
          logintype: "backend",
        }
      );
      if (res.data.token) {
        window.open(
          "https://yydsdev.yiy-tech.cn/manage/#/login?token=" + res.data.token,
          "_blank"
        );
      } else {
        this.$message.error('访问云药房失败！')
      }

    },
    //初始化地图机构数据
    proviceInitialValue() {
      let proviceData = [];
      for (let i = 0; i < geoJson.features.length; i++) {
        for (let j = 0; j < pniJSON.RECORDS.length; j++) {
          if (
            geoJson.features[i].properties.id == pniJSON.RECORDS[j].area_code
          ) {
            let obj = {};
            obj.id = pniJSON.RECORDS[j].area_code;
            obj.name = geoJson.features[i].properties.name;
            if (
              geoJson.features[i].properties.name == "浙江" ||
              geoJson.features[i].properties.name == "四川" ||
              geoJson.features[i].properties.name == "陕西" ||
              geoJson.features[i].properties.name == "宁夏" ||
              geoJson.features[i].properties.name == "安徽"
            ) {
              obj.value = 10;
            } else {
              if (pniJSON.RECORDS[j].count > 0) {
                obj.value = 3;
              }
            }
            obj.count = pniJSON.RECORDS[j].count;
            proviceData.push(obj);
          }
        }
      }
      this.proviceData = proviceData;
    },
    //地图
    drawMap() {
      var chartDom = document.getElementById("map-chart");
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;
      echarts.registerMap("china", geoJson);
      myChart.setOption(
        (option = {
          tooltip: {
            trigger: "item",
            triggerOn: "mousemove|click",
            backgroundColor: "#211C35",
            borderWidth: 0,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
            extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);",
            formatter: (e) => {
              if (e.data && e.data.count) {
                let valueStr =
                  "机构总数" +
                  "<p style='font-weight:bold;font-size:16px'>" +
                  e.data.count +
                  "</p>";
                return (
                  "<div style='display: flex'><div style='flex: 1;width:30px;height:30px;margin-right:10px;'><img src=" +
                  this.imgSrc +
                  " /></div><div style='flex: 1;'>" +
                  e.name +
                  "<br />" +
                  valueStr +
                  "</div></div>"
                );
              } else {
                return;
              }
            },
          },
          visualMap: {
            type: "piecewise", // 类型为分段型
            min: 0,
            max: 10,
            show: false,
            inRange: {
              color: ["#29243D", "#00D1FF"],
            },
          },
          //通过series 中的data更新数据
          series: [
            {
              name: "中国地图",
              type: "map",
              map: "china",
              label: {
                show: true,
                color: "#fff",
                formatter: (e) => {
                  if (e.value == 10) {
                    return e.name;
                  } else {
                    return "";
                  }
                },
              },
              left: "center",
              // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
              // layoutSize: 100
              zoom: 1.2,
              itemStyle: {
                areaColor: "#29243D",
                borderColor: "#00D1FF",
              },
              //高亮状态
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: (e) => {
                    return e.name;
                  },
                },
                itemStyle: {
                  areaColor: "#00D1FF",
                  shadowColor: "#00D1FF",
                  shadowBlur: 5,
                },
              },
              //选中
              select: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: (e) => {
                    return e.name;
                  },
                },
                itemStyle: {
                  areaColor: "#00D1FF",
                  shadowColor: "#00D1FF",
                  shadowBlur: 5,
                },
              },
              data: this.proviceData,
            },
          ],
        })
      );
      //点击地图
      myChart.on("click", (e) => {
        this.$router.push({
          path: "/dataScreen/data-list",
          query: { title: e.data.name, id: e.data.id },
        });
      });
      option && myChart.setOption(option);
    },
  },
  components: { countTo },
  created() {
    this.proviceInitialValue();
  },
  mounted() {
    setInterval(() => {
      this.currentTime = this.$base.timeSwitch(new Date(), true);
    }, 1000);

    this.$nextTick(() => {
      this.drawMap();
    });

    window.onresize = () => {
      this.drawMap();
    };
  },
};
</script>
<style lang="scss" scoped>
.el-container {
  height: 100vh;
  overflow: hidden;
  background-color: #18142c;
}

.el-header {
  min-height: 8vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #29243d;

  .logo {
    height: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
  }

  h3 {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 3px;
  }

  .screen-title {
    color: #ffffff;
    margin-right: 12px;

    p {
      font-size: 14px;
      font-family: ArialMT;
      letter-spacing: 1px;
    }
  }
}

.el-main {
  min-height: 90vh;
  overflow: hidden;

  .box-card {
    min-height: 58vh;
  }

  #map-chart {
    min-height: 90vh;
  }

  .menu-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;


  }

  .menu-list {
    flex: 1;
    cursor: pointer;
    padding: 22px;
    display: flex;
    background: #29243d;
    border-radius: 17px;
    border: 10px solid #bdbdbd;

    .menu-logo {
      height: 60px;
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    .title {
      flex: 1;
      display: flex;
      align-items: center;

      h3 {
        height: 30px;
        font-size: 22px;
        font-weight: 500;
        color: #fff;
        line-height: 30px;
        letter-spacing: 2px;
      }
    }

    .go {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .go-right {
        height: 12px;
        width: 12px;
        padding: 8px;
        background-color: #313131;
        border-radius: 50%;
      }
    }
  }

  // .menu-list:nth-child(1),
  // .menu-list:nth-child(2) {
  //   margin-right: 12px;
  // }
}

.header {
  margin-bottom: 12px;
  margin-left: 20px;
  letter-spacing: 2px;
  font-family: Arial-BoldMT, Arial;

  h3 {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
  }

  p {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: #bdbdbd;
  }
}

.data-list {
  margin-left: 20px;
  padding: 8px 0;
  letter-spacing: 2px;
  font-family: Arial-BoldMT, Arial;

  h6 {
    font-size: 18px;
    font-weight: 400;
    color: #bdbdbd;
    margin-bottom: 12px;
  }

  .value {
    font-size: 32px;
    font-family: Arial-BoldMT, Arial;
    font-weight: normal;
    color: #ffffff;
    margin-bottom: 12px;
  }

  .cursor {
    cursor: pointer;
  }

  .value:last-child {
    margin-bottom: 0;
  }
}

.box-card {
  color: #fff;
  border-radius: 8px;
  background: #29243d;
  margin-right: 12px;
  padding: 12px;
  box-sizing: border-box;
}

.title {
  font-weight: bold;
}

.num {
  font-weight: bold;
  color: #00d1ff;
}

.vip-num {
  font-size: 20px;
  margin-left: 20px;
}

#top {
  min-height: 10vh;
}

.select-btn {
  padding: 12px 20px;
  margin-right: 12px;
  background-color: #29243d;
}

.detail {
  position: fixed;
  bottom: 40px;
  left: 32px;
}

.menu-card {
  cursor: pointer;
  padding: 20px;
  background: #29243d;
  border-radius: 17px;
  color: #fff;
  border: 10px solid #bdbdbd;
  .title {
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #bdbdbd;
  }

  .menu-item {
    display: flex;
    margin-top: 20px;
    padding: 12px;

    .menu-logo {
      height: 60px;
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    .menu-title {
      flex: 1;
      display: flex;
      align-items: center;

      h3 {
        height: 30px;
        font-size: 18px;
        font-weight: 500;
        color: #eee;
        line-height: 30px;
        letter-spacing: 2px;
      }
    }
  }

  .menu-item:hover {
    border-radius: 17px;
    background-color: #18142c;
  }
}
</style>